<template>
  <div
    class="infusion-card"
    style="background: linear-gradient(180deg, #dcebff 0%, #ffffff 70%)"
    v-if="data && data.length > 0"
  >
    <div class="card-top">
      <span
        class="bed"
        :style="{
          background:
            data[0].status === 'off_line'
              ? '#E1E1E1'
              : (data[0].status === 'transfusion_draw_to_a_close') | 'infusion_end'
              ? '#FF8484'
              : '#82BCFF',
        }"
      >
        {{ data[0].bedNo }}
      </span>
      <span class="name" v-show="data[0].status != 'off_line'">
        {{ nameDesensitize(data[0].ptnName) }}
        （{{ data[0].ptnSex === "1" ? "男" : "女" }}）
      </span>
      <div
        v-show="data[0].status != 'off_line'"
        class="electricity"
        :style="{
          visibility: data.length === 1 ? 'visible' : 'hidden',
          backgroundImage: `url(${electricityNormal})`,
        }"
      >
        <!-- <img src="../../../assets/images/electricity-normal.svg" alt="" /> -->
        <span
          class="elec-mask"
          :style="{
            width: data[0].batteryType + '%',
            background: data[0].batteryType > 20 ? '#172446' : '#FB2626',
            opacity: data[0].batteryType > 20 ? 0.23 : 1,
          }"
        ></span>
        <span
          v-show="data[0].status != 'off_line'"
          class="quality"
          style="color: #172446"
        >
          {{ Math.ceil(data[0].battery) }}
        </span>
      </div>
    </div>
    <div class="card-middle">
      <!-- 绑定单设备 -->
      <div
        v-if="data.length === 1"
        class="sigle-device"
        :style="{
          color:
            data[0].status === 'infusion_now'
              ? '#1984ff'
              : (data[0].status === 'transfusion_draw_to_a_close') | 'infusion_end'
              ? '#FE5A59'
              : '#777777',
        }"
      >
        <div
          class="capacity-time"
          :style="{
            backgroundImage:
              data[0].status === 'off_line'
                ? `url(${offLine})`
                : `url(${parseMarginBg(data[0].margin)})`,
          }"
        >
          <span v-show="data[0].count">{{ Math.ceil(data[0].weight) }}ml</span>
          <span v-show="data[0].count">{{ Math.ceil(data[0].residueTime) }}分</span>
        </div>
        <div>{{ data[0].diTime || "==" }}</div>
      </div>

      <!-- 绑定双设备 -->
      <div v-else class="dual-device">
        <div
          class="left"
          :style="{
            color:
              data[0].status === 'infusion_now'
                ? '#1984ff'
                : (data[0].status === 'transfusion_draw_to_a_close') | 'infusion_end'
                ? '#FE5A59'
                : '#777777',
          }"
        >
          <div
            v-show="data[0].status != 'off_line'"
            class="electricity"
            :style="{ backgroundImage: `url(${electricityNormal})` }"
          >
            <!-- <img src="../../../assets/images/electricity-normal.svg" alt="" /> -->
            <span
              class="elec-mask"
              :style="{
                width: data[0].batteryType + '%',
                background: data[0].batteryType > 20 ? '#172446' : '#FB2626',
                opacity: data[0].batteryType > 20 ? 0.23 : 1,
              }"
            ></span>
            <span class="quality" style="color: #172446">
              {{ Math.ceil(data[0].battery) }}
            </span>
          </div>
          <div
            class="capacity-time"
            :style="{
              backgroundImage:
                data[0].status === 'off_line'
                  ? `url(${offLine})`
                  : `url(${parseMarginBg(data[0].margin)})`,
            }"
          >
            <span v-show="data[0].count">{{ Math.ceil(data[0].weight) }}ml</span>
            <span v-show="data[0].count">{{ Math.ceil(data[0].residueTime) }}分</span>
          </div>
          <div>{{ data[0].diTime || "==" }}</div>
        </div>
        <div
          class="right"
          :style="{
            color:
              data[1].status === 'infusion_now'
                ? '#1984ff'
                : (data[1].status === 'transfusion_draw_to_a_close') | 'infusion_end'
                ? '#FE5A59'
                : '#777777',
            background:
              data[0].status === 'off_line'
                ? 'linear-gradient( 180deg, #EBEBEB 0%, #FFFFFF 100%)'
                : (data[0].status === 'transfusion_draw_to_a_close') | 'infusion_end'
                ? 'linear-gradient( 180deg, #FFE2E2 0%, #FFFFFF 100%)'
                : 'linear-gradient( 180deg, #DCEBFF 0%, #FFFFFF 100%)',
          }"
        >
          <div
            v-show="data[1].status != 'off_line'"
            class="electricity"
            :style="{ backgroundImage: `url(${electricityNormal})` }"
          >
            <!-- <img src="../../../assets/images/electricity-normal.svg" alt="" /> -->
            <span
              class="elec-mask"
              :style="{
                width: data[1].batteryType + '%',
                background: data[1].batteryType > 20 ? '#172446' : '#FB2626',
                opacity: data[1].batteryType > 20 ? 0.23 : 1,
              }"
            ></span>
            <span class="quality" style="color: #172446">
              {{ Math.ceil(data[1].battery) }}
            </span>
          </div>
          <div
            class="capacity-time"
            :style="{
              backgroundImage:
                data[1].status === 'off_line'
                  ? `url(${offLine})`
                  : `url(${parseMarginBg(data[1].margin)})`,
            }"
          >
            <span v-show="data[1].count">{{ Math.ceil(data[1].weight) }}ml</span>
            <span v-show="data[1].count">{{ Math.ceil(data[1].residueTime) }}分</span>
          </div>
          <div>{{ data[1].diTime || "==" }}</div>
        </div>
      </div>
    </div>

    <div class="card-footer">
      <!-- 绑定单设备 -->
      <div
        v-if="data.length === 1"
        class="sigle-device"
        :style="{
          backgroundImage: `url(${parseInfusionStatusBg(data[0].status)})`,
          color:
            data[0].status === 'off_line'
              ? '#777777'
              : (data[0].status === 'transfusion_draw_to_a_close') | 'infusion_end'
              ? '#FE5A59'
              : '#1984ff',
        }"
      >
        {{ parseInfusionStatus(data[0].status) }}
      </div>

      <!-- 绑定双设备 -->
      <div v-else class="dual-device">
        <div
          class="left"
          :style="{
            backgroundImage: `url(${parseInfusionStatusBg(data[0].status)})`,
            color:
              data[0].status === 'off_line'
                ? '#777777'
                : (data[0].status === 'transfusion_draw_to_a_close') | 'infusion_end'
                ? '#FE5A59'
                : '#1984ff',
          }"
        >
          {{ parseInfusionStatus(data[0].status) }}
        </div>
        <div
          class="right"
          :style="{
            backgroundImage: `url(${parseInfusionStatusBg(data[1].status)})`,
            color:
              data[1].status === 'off_line'
                ? '#777777'
                : (data[1].status === 'transfusion_draw_to_a_close') | 'infusion_end'
                ? '#FE5A59'
                : '#1984ff',
          }"
        >
          {{ parseInfusionStatus(data[1].status) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import offLine from "@/assets/images/off_line.png";
import unknown from "@/assets/images/default.png";
import percent0 from "@/assets/images/percent-0.png";
import percent30 from "@/assets/images/percent-30.png";
import percent60 from "@/assets/images/percent-60.png";
import percent80 from "@/assets/images/percent-80.png";
import percent100 from "@/assets/images/percent-100.png";
import inProgress from "@/assets/images/in-progress.png";
import endSoon from "@/assets/images/end-soon.png";
import offline from "@/assets/images/offline.png";
import electricityNormal from "@/assets/images/electricity-normal.svg";
import nameDesensitize from "@/utils/desensitize";
import { ref, watch } from "vue";
const props = defineProps({
  info: {
    type: Array,
    default: () => [],
  },
});

let data = ref();

watch(
  () => props.info,
  (newVal, oldVal) => {
    data.value = newVal;
  },
  { immediate: true, deep: true }
);

//输液状态
function parseInfusionStatus(status) {
  let infusionStatus = "";
  switch (status) {
    case "sllep":
      infusionStatus = "待机";
      break;
    case "too_fast":
      infusionStatus = "滴速过快";
      break;
    case "glass_bottle_select":
      infusionStatus = "玻璃瓶选择";
      break;
    case "device_abnormal":
      infusionStatus = "设备异常";
      break;
    case "plastic_bottle_select":
      infusionStatus = "塑料瓶选择";
      break;
    case "shaking":
      infusionStatus = "晃动";
      break;
    case "plastic_bag_select":
      infusionStatus = "塑料袋选择";
      break;
    case "upgrade":
      infusionStatus = "OTA升级";
      break;
    case "infusion_end":
      infusionStatus = "输液结束";
      break;
    case "weight_overload":
      infusionStatus = "重量过载";
      break;
    case "pill_bottle_has_been_removed":
      infusionStatus = "药已取走";
      break;
    case "too_slow":
      infusionStatus = "滴速过慢";
      break;
    case "infusion_start":
      infusionStatus = "输液开始";
      break;
    case "infusion_now":
      infusionStatus = "输液中";
      break;
    case "off_line":
      infusionStatus = "离线";
      break;
    case "transfusion_draw_to_a_close":
      infusionStatus = "输液即将结束";
      break;
    case "urd_for_ep":
      infusionStatus = "未识别药品";
      break;
    case "kwh":
      infusionStatus = "低电量";
      break;
  }
  return infusionStatus;
}

//输液状态背景
function parseInfusionStatusBg(status) {
  let infusionBg = null;
  switch (status) {
    case "infusion_now":
      infusionBg = inProgress;
      break;
    case "transfusion_draw_to_a_close":
      infusionBg = endSoon;
      break;
    default:
      infusionBg = offline;
  }
  return infusionBg;
}
//输液水滴背景
function parseMarginBg(margin) {
  let marginBg = null;
  switch (margin) {
    case 1:
      marginBg = percent100;
      break;
    case 2:
      marginBg = percent80;
      break;
    case 3:
      marginBg = percent60;
      break;
    case 4:
      marginBg = percent30;
      break;
    case 5:
      marginBg = percent0;
      break;
    default:
      marginBg = unknown;
  }
  return marginBg;
}
</script>

<style lang="scss" scoped>
.infusion-card {
  height: 22vh;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 22vh;
  .card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5vh 0;
    .bed {
      width: 2.5vw;
      text-align: center;
      padding: 0.2vh;
      border-radius: 0px 10px 10px 0px;
      color: #fff;
      font-weight: 550;
    }
    .name {
      font-size: 1vw;
    }
    .electricity {
      margin-right: 0.5vw;
      font-size: 0.5rem;
      width: 1.2vw;
      height: 1.2vh;
      position: relative;
      // background-image: url(../../../assets/images/electricity-normal.svg);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      .elec-mask {
        display: block;
        height: 85%;
        position: absolute;
        left: 5%;
        top: 10%;
        border-radius: 20%;
        z-index: 1000;
      }
      .quality {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .card-middle {
    flex: 1;
    font-size: 0.6rem;
    .sigle-device {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1.5vh 2vw 0.5vh 2vw;
      .capacity-time {
        flex: 3;
        width: 3vw;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
    .dual-device {
      height: 100%;
      display: flex;
      padding: 1.5vh 0 0.5vh 0;
      > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        .electricity {
          position: absolute;
          top: -1.6vh;
          width: 1.2vw;
          height: 1.2vh;
          // background-image: url(../../../assets/images/electricity-normal.svg);
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          font-size: 0.5rem;
          .elec-mask {
            display: block;
            height: 85%;
            position: absolute;
            left: 5%;
            top: 8%;
            // border-radius: 20%;
            z-index: 1000;
          }
          .quality {
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .capacity-time {
          flex: 3;
          width: 3vw;
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }
      .left {
        flex: 1;
        .electricity {
          left: 0.8vw;
        }
      }
      .right {
        flex: 1;
        .electricity {
          right: 0.8vw;
        }
      }
    }
  }
  .card-footer {
    height: 4vh;
    display: flex;
    > div {
      width: 100%;
      height: 100%;
      line-height: 4vh;
    }
    .sigle-device {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      text-align: center;
    }
    .dual-device {
      display: flex;
      > div {
        text-align: center;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .left {
        flex: 1;
        background-position: 50% 0;
      }
      .right {
        flex: 1;
        background-position: 50% 0;
      }
    }
  }
}
</style>
